<!-- 实名认证 -->
<template>
  <view>
    <aster-back font-color="#333" :show-title="true" title="实名认证" />
    <view class="container" v-show="!isAuth">
      <view class="box">
        <view class="form">
          <view class="form__input">
            <view class="name">真实姓名</view>
            <input
              v-model="userInfo.realname"
              type="text"
              autocomplete="off"
              placeholder="请输入真实姓名"
              maxlength="20"
            />
          </view>
          <view class="form__input">
            <view class="name">身份证号</view>
            <input
              v-model="userInfo.idcard"
              type="idcard"
              autocomplete="off"
              placeholder="请输入身份证号"
              maxlength="18"
            />
          </view>
          <view class="form__title">
            <text>上传身份证照片</text>
            <view class="tip" @click="showNote()">
              <uni-icons type="info" color="#eca419" size="18" />
              注意事项
            </view>
          </view>
          <view class="upload__box">
            <view class="upload__item">
              <uni-file-picker
                v-model="fontImage"
                :limit="1"
                file-mediatype="image"
                :auto-upload="true"
                :imageStyles="imageStyles"
                @select="selectFontImage"
                @delete="deleteImage"
              >
                <image
                  src="@/static/images/idcard/idcard-front.png"
                  style="width: 150px; height: 100px; padding: 10px"
                />
              </uni-file-picker>
              <view class="intro">拍摄正面</view>
            </view>
            <view class="upload__item">
              <uni-file-picker
                v-model="behindImage"
                :limit="1"
                file-mediatype="image"
                :auto-upload="true"
                :imageStyles="imageStyles"
                @select="selectBehindImage"
                @delete="deleteImage"
              >
                <image
                  src="@/static/images/idcard/idcard-behind.png"
                  style="width: 150px; height: 100px; padding: 10px"
                />
              </uni-file-picker>
              <view class="intro">拍摄反面</view>
            </view>
          </view>
          <view class="form__tip">
            <text style="font-size: 32rpx; color: #333">温馨提示：</text>拍摄时确保身份证
            <text style="color: #ff5050"> 边框完整，字体清晰，亮度均匀</text>
          </view>
          <view class="form__help">
            <text>无法通过认证？</text>
            <text style="color: #3c7bfb" @click="help">点击获得帮助</text>
          </view>
          <view class="form__submit">
            <button type="primary" @click="submit">确认提交</button>
          </view>
        </view>
      </view>
    </view>
    <view v-show="isAuth" class="auth">
      <view class="auth__box">
        <view>
          <view class="auth__title">您已实名认证</view>
          <view class="auth__content">
            <view>{{ userInfo.realname }}</view>
            <view>{{ userInfo.idcard }}</view>
          </view>
        </view>
        <view class="auth__icon">
          <view class="iconfont icon-user" style="font-size: 160rpx" />
        </view>
      </view>
      <view class="margin-top-lg">
        <view class="auth__audit">
          <view
            class="iconfont icon-yuanxingxuanzhong"
            style="color: green; font-size: 32px; width: 20%"
          />
          <view class="btn">审核通过</view>
        </view>
      </view>
    </view>
  </view>
</template>
<script setup lang="ts">
  import AsterBack from '@/components/common/aster-back.vue';
  import { ResultEnum } from '@/enums/httpEnum';
  import { realnameAuthentication, getSensitiveData } from '@/services/api/user/user';
  import { FileModel, FilePickerModel } from '@/services/model/fileModel';
  import { SensitiveDataModel } from '@/services/model/userModel';
  import config from '@/utils/config';
  import { isEmpty } from '@/utils/is';
  import { router } from '@/utils/router';
  import { Modal, Toast } from '@/utils/uniapi/prompt';
  import { onLoad } from '@dcloudio/uni-app';
  import { reactive, ref } from 'vue';

  const userInfo = reactive<SensitiveDataModel>({
    realname: '',
    idcard: '',
  });
  const isAuth = ref(false);
  const fontImage = ref<FileModel>();
  const behindImage = ref<FileModel>();

  onLoad(() => {
    getSensitiveData().then(({ data }) => {
      userInfo.realname = data.data.realname;
      userInfo.idcard = data.data.idcard;
      if (isEmpty(userInfo.idcard)) {
        isAuth.value = false;
      } else {
        isAuth.value = true;
      }
    });
  });

  /** 待提交文件 */
  const files = ref<Array<FileModel>>([]);

  // 头像样式
  const imageStyles = {
    width: 150,
    height: 100,
    border: {
      radius: '20rpx 20rpx 0 0',
    },
  };

  /**
   * 选择
   * @param e 文件
   */
  const selectFontImage = (e: FilePickerModel) => {
    if (e.tempFiles) {
      files.value[0] = e.tempFiles[0];
    }
  };
  const selectBehindImage = (e: FilePickerModel) => {
    if (e.tempFiles) {
      files.value[1] = e.tempFiles[0];
    }
  };

  /**
   * 删除
   * @param e 文件
   */
  const deleteImage = (e: FilePickerModel) => {
    files.value = files.value.filter((item) => {
      return item.uuid != e.tempFile?.uuid;
    });
  };

  /**
   * 注意事项
   */
  const showNote = () => {
    Modal({
      title: '注意事项',
      content: '1、大陆公民持本人有效的二代身份证2、拍摄时确保身份证边框完整，字体清晰，亮度均匀',
      confirmText: '我已知晓',
      confirmColor: '#2979ff',
      showCancel: false,
    });
  };

  const help = () => {
    Toast('正在建设中。。。');
  };

  const submit = () => {
    realnameAuthentication({ files: files, ...userInfo }).then(({ data }) => {
      if (data.code == ResultEnum.SUCCESS) {
        Toast('认证成功！');
        router.pushTab(config.route.my);
      } else {
        Toast(data.message);
      }
    });
  };
</script>
<style lang="scss" scoped>
  page {
    color: #333;
  }

  .container {
    height: auto;
    overflow: hidden;
    padding: 10rpx 30rpx;

    .box {
      height: 100%;
      background: url(@/static/images/idcard/box-bg.png) right center no-repeat;
      background-size: 100% 100%;

      .form {
        padding: 60rpx 24rpx;

        &__input {
          display: flex;
          justify-content: space-between;
          align-items: center;
          background: #f7f7f7;
          font-size: 32rpx;
          padding: 20rpx 10rpx;
          margin-bottom: 2rpx;

          .name {
            color: #333;
            flex-shrink: 0;
            padding-left: 30rpx;
            padding-right: 55rpx;
          }

          input {
            text-indent: 6rpx;
            width: 100%;
            background: transparent;
            color: #333;
          }
        }

        &__title {
          font-size: 32rpx;
          color: #000;
          display: flex;
          align-items: center;
          padding: 85rpx 0 50rpx 0;

          .tip {
            color: #eca419;
            font-size: 24rpx;
            display: flex;
            align-items: center;
            margin-left: 30rpx;
          }
        }

        .upload {
          &__box {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
          }

          &__item {
            background: #f4f8fe;
            border-radius: 20rpx;

            .intro {
              background: #5581ff;
              border-radius: 0 0 20rpx 20rpx;
              text-align: center;
              color: #fff;
              font-size: 32rpx;
              padding: 12rpx 0;
            }
          }
        }

        &__tip {
          color: #999;
          font-size: 28rpx;
          margin: 60rpx 0 20rpx 0;
        }

        &__help {
          font-size: 28rpx;
          color: #9d9d9d;
          text-align: center;
        }

        &__submit {
          text-align: center;
          padding: 30rpx 40rpx;
        }
      }
    }
  }

  .auth {
    padding: 60rpx 30rpx;

    &__box {
      width: 100%;
      height: 400rpx;
      background-color: #5581ff;
      color: #fff;
      border-radius: 20rpx;

      display: flex;
      justify-content: space-between;
    }

    &__title {
      font-size: 48rpx;
      font-weight: bold;
      padding: 60rpx 20rpx 20rpx;
    }

    &__content {
      font-size: 36rpx;
      padding: 20rpx;
    }

    &__icon {
      color: #fff;
      margin: 20rpx;
    }

    &__audit {
      background-color: #fff;
      border-radius: 20rpx;
      width: 100%;
      font-size: 36rpx;
      display: flex;
      align-items: center;
      padding: 2rpx 50rpx;

      .btn {
        width: 70%;
        display: flex;
        justify-content: center;
        color: #333;
        font-weight: bold;
        letter-spacing: 10rpx;
      }
    }
  }
</style>
